<template>
  <div class=''>
    <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
            <h3>Hello World!</h3>
            <p>{{ top }} х {{ left }} </p>
            <p>{{ width }} х {{ height }}</p>
        </VueDragResize>
  </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize'
export default {
  name: '',
  components: {
    VueDragResize
  },
  props: {},
  data() {
    return {
        width: 0,
                height: 0,
                top: 0,
                left: 0
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    resize(newRect) {
        console.log('new', newRect)
        this.width = newRect.width;
        this.height = newRect.height;
        this.top = newRect.top;
        this.left = newRect.left;
    }
  },
}
</script>

<style scoped></style>